<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<title></title>
	</head>
	<body>
		<div id="app">
			<!--v-for: array-->
			<ul>
				<li v-for="(item,index) in items" :key="item.id">{{ index +"-"+ item.name}}</li>
			</ul>
			
			<!--v-for: object-->
			<ul>
				<li v-for="(value,key,index) in obj">{{ index +"-"+ key +"："+ value}}</li>
			</ul>
			
			<ul>
				<li v-for="item in arr">{{item}}</li>
			</ul>
			
			<ul>
				<li>{{model}}</li>
			</ul>
			
			<ul>
				<li v-for="even in evenNum">{{even}}</li>
			</ul>
			
			<!--一段取值范围的v-for-->
			<ul>
				<li v-for="item in 5">{{item}}</li>
			</ul>
			
			<!--v-for 和 v-if-->
			<ul>
				<li v-for="(item,index) in items" v-if="item.id > 0" v-bind:index="index">{{ index +": "+ item.name}}</li>
			</ul>
		</div>
		
		
		
		
		
		
		<script src="js/vue.js" ></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					items: [
						{
							id: 0,
							name: "DATA"
						},
						{
							id: 1,
							name: "LoL"
						},
						{
							id: 2,
							name: "DNF"
						}
					],
					obj: {
						name: "DATA",
						version: "v6.80",
						author: "iceFrog"
					},
					arr: [1,2,3,4,5,6],
					model: '',   // data内的数据必须先定义
					num: [1,2,3,4,5,6]
				},
				computed: {
					evenNum: function(){
						var res =  this.num.filter(function(item,index,array){
							return item % 2 == 0;
						});
						return res;
					}
				},
				methods: {
					
				}
			});
			
			// 赋值
			vm.$data.model = "error";
			// 使用全局 Vue.set 修改
			Vue.set(vm.$data, 'model', 'errorPlus');
			
			// Vue具有数组更新检测特性，但由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
			// 1.利用索引直接设置一个项时
			vm.arr[0] = 'one';
			// 解决方案：
			Vue.set(vm.arr, 0, 'one');
			vm.arr.splice(0,1,'one');
			
			// 2.修改数组的长度时
			vm.arr.length = 2;			
			// 解决方案：
			vm.arr.splice(2);
			
			
			// 还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除（修改可以监测）
			// 添加
			vm.obj.sts = 'success';
			// 解决方案：
			Vue.set(vm.obj, 'sts', 'success');
			// vm.$set(vm.obj, 'sts', 'success');  // 只是全局 Vue.set 的别名
			
			// 删除
			delete vm.obj.name;
			// 解决方案：
			Vue.delete(vm.obj, 'name');
			
			
			
		</script>
	</body>
</html>
